<template>
    <div class="mainnerleft clearfix">
        <div class="m-info clearfix">
            <div class="cover">
                <img v-lazy="playlist.coverImgUrl">
                <span class="msk"></span>
            </div>
            <div class="cnt clearfix">
                <div class="hd clearfix">
                    <i></i>
                    <div class="tit">
                        <h2>{{playlist.name}}</h2>
                    </div>
                </div>
                <div class="user clearfix">
                    <a class="avatar">
                        <img v-lazy="avatarUrl">
                    </a>
                    <span class="name">
                        <a class="underline">{{nickname}}</a>
                        <!-- <img src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/…bf/64a1/1ea2/31a08617d7dfddb21fffdb92390ce268.png"> -->
                    </span>
                    <span class="time">{{playlist.createTime}}&nbsp;创建</span>
                </div>
                <!-- 底部按钮 -->
                <div class="btns">
                    <a class="play" title="播放" @click="playAllMusic">
                        <i class="ply"></i>
                        <span>播放</span>
                    </a>
                    <a class="add" @click="addAllSongsMusicList"></a>
                    <button :class="isSub ? 'dis2' : 'dis1'"  @click="subSongList">
                        <span>{{ isSub ? "已收藏" : "收藏" }}</span>
                    </button>
                    <a class="share">
                        <span></span>
                    </a>
                    <a class="comment">
                        <span></span>
                    </a>
                </div>
                <div class="tags clearfix" v-show="playlist.tags.length != 0">
                    <span>标签：</span>
                    <a class="tag" v-for="tag,index in playlist.tags" :key="index"><i>{{tag.name}}</i></a>
                </div>
                <div class="desc-dot" v-show="showDot && playlist.description != null">
                    <p>
                        <b>介绍：</b>
                        <span v-html="playlist.descDot"></span>
                    </p>
                    <a class="underline" @click="showDot=false">展开
                        <i class="down"></i>
                    </a>
                </div>
                <div class="desc-more" v-show="!showDot && playlist.description != null">
                    <p>
                        <b>介绍：</b>
                        <span v-html="playlist.descMore"></span>
                    </p>
                    <a class="underline" @click="showDot=true">收起
                        <i class="up"></i>
                    </a>
                </div>
                <!-- 底部按钮 -->
            </div>
        </div>
        <SongList></SongList>
        <Comment :comments="comments" :commentInfo="commentInfo" :getCommentHot="getCommentHot"></Comment>
        <Pagination :pageNo='searchParams.pageNo' :pageSize='searchParams.pageSize' :total='searchParams.total' :continues='5' @getPageNo="getPageNo"></Pagination>
    </div>
</template>

<script>
    import Comment from "@/components/Comment"
    import Pagination from '@/components/Pagination'
    import SongList from './SongList'
    export default {
        name: "mainnerleft",
        components:{SongList,Comment,Pagination},
        data() {
            return {
                comments: [],
                searchParams:{
                    total:0,
                    pageSize:30,
                    pageNo:1,
                },
                // 歌词
                currentLyric:{},
                // 歌曲详情
                songDetail:{},
                // 显示一半歌词
                halflyric:true,
                // 评论数
                commentnum:0,
                showCancel: false,
                userInfo: {},
                commentInfo: {
                    // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
                    commentType: 2,
                    targetUid: this.$route.query.id,
                    // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
                    source: "SONGLIST_INFO",
                    total:0,
                },
                currentPage: 1,
                pageSize: 10,
                total: 0, //总数量
                toInfo: {},

                // 歌单数据
                playlist:{
                    tags: []
                },
                songlist: [],
                avatarUrl:'https://p3.music.126.net/dwslx7VNYE-h8TP0VkBxcg==/109951165800028895.jpg',
                // 显示详情或简略
                showDot:true,
                nickname: '小智乐库',
                isSub: {
                    type: Boolean,
                    default() {
                        return false;
                    },
                },
            }
        },
        computed:{
            userSongList(){
                return this.$store.state.music.userSongList;
            },
            isLogin() {
                return this.$store.state.login.isLogin;
            },
            id(){
                return this.$route.query.id;
            },
            USERID(){
                localStorage.getItem('USERID')
            }
        },
        watch:{
            isLogin() {
                return this.$store.state.login.isLogin;
            },
            userSongList(){
                return this.$store.state.music.userSongList;
            },
            id(){
                this.getPlayListDetail();
            },
            USERID(){
                localStorage.getItem('USERID')
            }
        },
        created() {
            this.isSubSongList();
            this.getCommentHot();
        },
        methods:{
            async getCommentHot(){
                let obj = await this.$API.reqCommentHot(this.id,this.commentInfo.commentType,this.searchParams.pageSize,(this.searchParams.pageNo-1)*(this.searchParams.pageSize));
                this.searchParams.total = obj.result.total;
                this.commentInfo.total = obj.result.total;
                this.comments = obj.result.comments;
                this.comments.forEach(item=>{
                    item.content = item.content.replace(/\n/g,'<br>');
                });
            },
            //获取当前页数
            getPageNo(pageNo) {
                this.searchParams.pageNo = pageNo;
                this.getCommentHot();
            },
            playAllMusic(){
                let arr = [];
                if (this.songlist.length>0){
                    this.songlist.forEach((item,index,array)=>{
                        arr.push(item.id);
                    });
                    this.$store.dispatch('addMusicList',arr);
                    this.$store.dispatch('setMusics',arr[0]);
                    setTimeout(() => {
                        this.$bus.$emit('play');
                    }, 500);
                }
            },
            addAllSongsMusicList(){
                let arr = [];
                if (this.songlist.length>0){
                    this.songlist.forEach((item,index,array)=>{
                        arr.push(item.id);
                    });
                    this.$store.dispatch('addMusicList',arr);
                }
            },
            async isSubSongList() {
                let obj = await this.$API.iscollectSonglist(localStorage.getItem('USERID'),this.id);
                if (obj.code==200){
                    this.isSub = obj.result.isSub;
                }else {
                    this.$notify.error({
                        message: '系统异常!'
                    });
                    return ;
                }

            },
            // 获取歌单信息
            async getPlayListDetail(){
                let obj = await this.$API.reqPlayListDetail(this.id);
                this.playlist = obj.result.playlist;
                this.songlist = [];
                this.songlist = obj.result.songlist;
                if(this.playlist.description != null){
                    this.playlist.descDot = obj.result.playlist.description.replace(/\n/g,'<br>').slice(0,100)+'...';
                    this.playlist.descMore = obj.result.playlist.description.replace(/\n/g,'<br>');
                }
            },
            // 收藏歌单
            // 收藏歌单
            async subSongList() {
                // 先判断登录状态
                if (!this.isLogin){
                    this.$notify.error("先登录")
                }else {
                    let t = !this.isSub ? 1 : 2; // 1 为收藏,2为取消收藏
                    this.$API.reqSubSongList(t,this.id,localStorage.getItem("USERID")).then(res => {
                        if (res.code == 200){
                            this.isSub = !this.isSub;
                            if (t == 1) {
                                this.$notify({
                                    type: "success",
                                    message: "收藏成功",
                                });
                            } else {
                                this.$notify({
                                    type: "success",
                                    message: "取消收藏成功",
                                });
                            }
                            this.$store.dispatch('getUserSonglist');
                            this.isSubSongList();
                        }
                    })
                    .catch(error => this.$notify.error("操作失败,请重试"));

                }
            },
        },
        mounted(){
            this.getPlayListDetail();
            this.isSubSongList();
            this.getCommentHot();
        }
    }
</script>


<style lang="less" scoped>
    .mainnerleft{
        float: left;
        padding: 47px 30px 40px 39px;
        border-right: 2px solid #e3e3e3;
        .m-info{
            width: 640px;
            margin-bottom: 30px;
            .cover{
                width: 200px;
                height: 200px;
                float: left;
                position: relative;
                img{
                    display: block;
                    width: 200px;
                    height: 200px;
                }
                .msk{
                    display: inline-block;
                    width: 208px;
                    height: 208px;
                    background: url('../images/coverall.png') no-repeat;
                    background-position: 0 -1285px;
                    position: absolute;
                    top: -4px;
                    left: -4px;
                }
            }
            .cnt{
                width: 410px;
                float: right;
                .hd{
                    position: relative;
                    margin: 0 0 12px;
                    line-height: 24px;
                    i{
                        float: left;
                        width: 54px;
                        height: 24px;
                        background: url('../images/icon.png') no-repeat;
                        background-position: 0 -243px;
                        overflow: hidden;
                        vertical-align: middle;
                    }
                    .tit{
                        margin-left: 5px;
                        float: left;
                        width: 346px;
                        line-height: 24px;
                        h2{
                            font-size: 20px;
                            font-weight: normal;
                            color: #000;
                        }
                    }
                }
                .user{
                    width: 100%;
                    height: 35px;
                    margin-bottom: 20px;
                    .avatar{
                        width: 35px;
                        height: 35px;
                        margin-right: 10px;
                        img{

                            width: 35px;
                            height: 35px;
                        }
                    }
                    .name{
                        a{
                            color: #0c73c2;
                            &:hover{
                                color: #0c73c2;
                            }
                        }
                        img{
                            width: 13px;
                            height: 13px;
                        }
                    }
                    .time{
                        margin-left: 15px;
                        color: #999;
                    }
                }
                .btns{
                    height: 31px;
                    display: flex;

                    .play{
                        width: 66px;
                        padding-left: 5px;
                        background: url('../images/button2.png') no-repeat 0 -1652px;;
                        text-align: center;
                        line-height: 31px;
                        height: 31px;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;

                        i{
                            width: 20px;
                            height: 18px;
                            margin: 6px 2px 2px 0;
                            float: left;
                            background: url('../images/button2.png') no-repeat 0 -1622px;
                        }

                        span{
                            color: #fff;
                        }
                        &:hover{
                            cursor: pointer;
                        }
                    }

                    .add{
                        width: 31px;
                        height: 31px;
                        margin-right: 5px;
                        background: url('../images/button2.png') no-repeat 0 -1588px;

                        &:hover{
                            cursor: pointer;
                            background-position: -40px -1588px;
                        }
                        &:active{
                            background-position: -80px -1588px;
                        }
                    }

                    .dis1{
                        // width: 92.6px;
                        // padding-right: 5px;
                        margin-right: 6px;
                        height: 100%;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0px -1063px;
                        span{
                            padding-right: 10px;
                            display: inline-block;
                            height: 100%;
                            width: 100%;
                            background: url('../images/button2.png') no-repeat right -1106px;
                            line-height: 30px;
                            padding-left: 30px;
                        }
                        &:hover{
                            color:#666;
                            cursor:default;
                        }
                    }
                    .dis2{
                        // width: 92.6px;
                        // padding-right: 5px;
                        margin-right: 6px;
                        height: 100%;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -3180px;
                        span{
                            padding-right: 10px;
                            display: inline-block;
                            height: 100%;
                            width: 100%;
                            background: url('../images/button2.png') no-repeat right -3223px;
                            line-height: 30px;
                            padding-left: 30px;
                        }
                        &:hover{
                            color:#666;
                            cursor:default;
                        }
                    }

                    .share{
                        height: 31px;
                        margin-right: 6px;
                        float: left;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -1225px;

                        span{
                            padding-right: 10px;
                            width: 100%;
                            height: 100%;
                            display: inline-block;
                            line-height: 30px;
                            padding-left: 28px;
                            background: url('../images/button2.png') no-repeat;
                            background-position: right -1020px;
                        }

                        &:hover{
                            color:#666;
                            cursor: pointer;
                        }
                    }

                    .download{
                        margin-right: 5px;
                        width: 60px;
                        height: 31px;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -2761px;

                        span{
                            width: 100%;
                            height: 100%;
                            display: inline-block;
                            line-height: 30px;
                            padding-left: 28px;
                            background: url('../images/button2.png') no-repeat;
                            background-position: right -1020px;
                        }
                        &:hover{
                            color:#666;
                            cursor: pointer;
                        }
                    }

                    .comment{
                        margin-right: 5px;

                        height: 31px ;
                        line-height: 30px;
                        min-width: 23px;
                        cursor: pointer;
                        background: url('../images/button2.png') no-repeat;
                        background-position: 0 -1465px;

                        span{
                            // width: 100%;
                            padding-right: 10px;
                            height: 100%;
                            display: inline-block;
                            line-height: 30px;
                            padding-left: 28px;
                            background: url('../images/button2.png') no-repeat;
                            background-position: right -1020px;
                        }
                        &:hover{
                            color:#666;
                            cursor: pointer;
                        }
                    }
                }
                .tags{
                    margin: 25px 0 5px;
                    line-height: 22px;
                    width: 100%;
                    >span{
                        float: left;
                    }
                    .tag{
                        float: left;
                        margin: 0px 10px 3px 0;
                        padding: 0 10px 0 0;
                        text-shadow: 0 1px #fdfdfd;
                        background: url('../images/button2.png') no-repeat;
                        background-position: right -27px;
                        color: #777;
                        height: 22px;
                        line-height: 22px;
                        i{
                            position: relative;
                            padding: 0 3px 0 13px;
                            float: left;
                            background: url('../images/button2.png') no-repeat;
                            background-position: 0 0;
                        }
                    }
                }
                .desc-dot,
                .desc-more{
                    a{
                        float: right;
                        .down{
                            display: inline-block;
                            width: 11px;
                            height: 8px;
                            background: url('../images/icon.png') no-repeat;
                            background-position: -65px -520px;
                        }
                        .up{
                            display: inline-block;
                            width: 11px;
                            height: 8px;
                            background: url('../images/icon.png') no-repeat;
                            background-position: -45px -520px;
                        }
                        &:hover{
                            color: #666;
                        }
                    }
                }
            }
        }
    }
</style>